<template>
	<view class="normal-login-container">
		<uni-notice-bar :text="tips" />
		<view class="login-form-content">
			<view class="input-item" style="display: flex;justify-content: center;align-items: center;">
				<view class="icon">
					<uni-icons type="person-filled" size="19"></uni-icons>
				</view>
				<input :disabled="true" v-model="phoneForm.oldPhone" class="input" type="text" placeholder="当前手机号" maxlength="11" />
			</view>
			<view class="input-item"
				style="width: 60%;margin: 0px;display: flex;justify-content: center;align-items: center;">
				<view class="icon">
					<uni-icons type="checkbox" size="19"></uni-icons>
				</view>
				<input v-model="phoneForm.oldPhoneCode" type="number" class="input" placeholder="当前手机验证码" maxlength="4" />
				<view style="height: 45px;float: right;">
					<view hover-class="buttonHover" @click="getOldPhoneCode"
						style="height: 45px;position: absolute;margin-left: 10px;width: 104px;background-color: #f5f6f7;display: flex;justify-content: center;align-items: center;border-radius: 20px;">
						{{oldCodeBtn.codeText}}
					</view>
				</view>
			</view>
			<view class="input-item" style="display: flex;justify-content: center;align-items: center;">
				<view class="icon">
					<uni-icons type="person" size="19"></uni-icons>
				</view>
				<input v-model="phoneForm.newPhone" class="input" type="text" placeholder="请输入新手机号" maxlength="11" />
			</view>
			<view class="input-item"
				style="width: 60%;margin: 0px;display: flex;justify-content: center;align-items: center;">
				<view class="icon">
					<uni-icons type="checkbox" size="19"></uni-icons>
				</view>
				<input v-model="phoneForm.phoneCode" type="number" class="input" placeholder="请输入新手机验证码" maxlength="4" />
				<view style="height: 45px;float: right;">
					<view hover-class="buttonHover" @click="getNewPhonecode"
						style="height: 45px;position: absolute;margin-left: 10px;width: 104px;background-color: #f5f6f7;display: flex;justify-content: center;align-items: center;border-radius: 20px;">
						{{newCodeBtn.codeText}}
					</view>
				</view>
			</view>
			<view class="action-btn">
				<button @click="handlePhone" hover-class="btnHover" class="login-btn">确定</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		regSendSms,
		changeUserPhone
	} from '@/api/login'

	export default {
		data() {
			return {
				tips:'当前手机号变更为新手机号时，原手机账号将注销，修改成功后将退出系统重新登录!',
				phoneForm: {
					oldPhone:'',
					oldPhoneCode: "",
					newPhone:'',
					phoneCode: ""
				},
				//验证规则
				rules: {
					oldPhone: {
						rule: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
						msg: "当前旧手机号不正确"
					},
					newPhone: {
						rule: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
						msg: "请输入正确的手机号"
					},
					phoneCode: {
						rule: /^[0-9]{4}$/,
						msg: "请输入正确的验证码"
					}
				},
				//旧手机验证码按钮
				oldCodeBtn: {
					codeTime: 60,
					codeText: "获取验证码",
					codeStatus: true
				},
				//新手机验证码按钮
				newCodeBtn: {
					codeTime: 60,
					codeText: "获取验证码",
					codeStatus: true
				},
			}
		},
		onLoad(e) {
			if(e.oldPhone)
			{
				this.$set(this.phoneForm,'oldPhone',e.oldPhone)
			}
		},
		methods: {
			//判断验证是否符合要求，合法性校验
			validate(key) {
				let bool = true;
				if (!this.rules[key].rule.test(this.phoneForm[key])) {
					//提示信息
					uni.showToast({
						title: this.rules[key].msg,
						icon: 'none'
					})
					//取反
					bool = false;
					return false;
				}
				return bool;
			},
			//获取旧手机验证码按钮点击计时事件
			getOldPhoneCode() {
				let that = this
				let queryParams = {
					phone: this.phoneForm.oldPhone
				}
				if (this.validate('oldPhone') && this.oldCodeBtn.codeStatus) {
					regSendSms(queryParams).then(res => {
						//如果发送验证码成功
						if (res.data) {
							uni.showToast({
								title: '已发送至您的手机',
								icon: 'none'
							})
							this.oldCodeBtn.codeStatus = false
							let timerId = setInterval(() => {
								let codetime = that.oldCodeBtn.codeTime
								codetime--
								that.oldCodeBtn.codeTime = codetime
								that.oldCodeBtn.codeText = codetime + "s"
								if (codetime < 1) {
									clearInterval(timerId)
									that.oldCodeBtn.codeText = "重新获取"
									that.oldCodeBtn.codeTime = 60
									that.oldCodeBtn.codeStatus = true
								}
							}, 1000)
						}
						else
						{
							uni.showToast({
								title: '验证码发送失败',
								icon: 'none'
							})
						}
					}).catch(error => {
						uni.showToast({
							title: error,
							icon: 'none'
						})
					})
				}
			},
			//获取新手机验证码按钮点击计时事件
			getNewPhonecode() {
				let that = this
				let queryParams = {
					phone: this.phoneForm.newPhone
				}
				if (this.validate('newPhone') && this.newCodeBtn.codeStatus) {
					regSendSms(queryParams).then(res => {
						//如果发送验证码成功
						if (res.data) {
							uni.showToast({
								title: '已发送至您的手机',
								icon: 'none'
							})
							this.newCodeBtn.codeStatus = false
							let timerId = setInterval(() => {
								let codetime = that.newCodeBtn.codeTime
								codetime--
								that.newCodeBtn.codeTime = codetime
								that.newCodeBtn.codeText = codetime + "s"
								if (codetime < 1) {
									clearInterval(timerId)
									that.newCodeBtn.codeText = "重新获取"
									that.newCodeBtn.codeTime = 60
									that.newCodeBtn.codeStatus = true
								}
							}, 1000)
						}
						else
						{
							uni.showToast({
								title: '验证码发送失败',
								icon: 'none'
							})
						}
					}).catch(error => {
						uni.showToast({
							title: error,
							icon: 'none'
						})
					})
				}
			},
			// 修改手机号
			handlePhone() {
				if (this.phoneForm.oldPhoneCode == "") {
					uni.showToast({
						icon: 'none',
						title: '当前手机验证码不能为空!'
					})
					return
				}
				if (this.phoneForm.newPhone == "") {
					uni.showToast({
						icon: 'none',
						title: '新手机号不能为空!'
					})
					return
				}
				if (this.phoneForm.phoneCode == "") {
					uni.showToast({
						icon: 'none',
						title: '新手机验证码不能为空!'
					})
					return
				}
				let that=this
				uni.showLoading({
					mask: true,
					title: '正在修改...'
				})
				changeUserPhone(this.phoneForm).then(res => {
					uni.hideLoading()
					if (res.code == '200')
					{
						uni.showToast({
							icon:'success',
							title:'手机号码修改成功!'
						})
						uni.showLoading({
							title:'正在退出...'
						})
						setTimeout(()=>{
							uni.hideLoading() 
							//退出登录
							that.$store.dispatch('LogOut').then(res => {
							  uni.reLaunch({ url: '/pages/login/login' })
							})
						},800)
					}
					else
					{
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.normal-login-container {
		width: 100%;
		height: 100%;
		background-color: #ffffff;

		.login-form-content {
			text-align: center;
			margin: 0 auto;
			// padding-top: 15%;
			width: 80%;

			.input-item {
				margin: 20px auto;
				background-color: #f5f6f7;
				height: 45px;
				border-radius: 20px;

				.icon {
					font-size: 38rpx;
					margin-left: 10px;
					color: #999;
				}

				.input {
					width: 100%;
					font-size: 14px;
					line-height: 20px;
					text-align: left;
					padding-left: 15px;
				}

			}

			.login-btn {
				margin-top: 40px;
				height: 45px;
				background-color: #0081ff;
				color: white;
			}
		}
	}

	.btnHover {
		transform: translate(1px, 1px);
	}
	.buttonHover {
		opacity: 0.6;
	}
</style>